<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
        <script type='text/javascript' src='https://s3.amazonaws.com/mturk-public/externalHIT_v1.js'></script>

        <script>
            STATIC_ROOT = "../static";

            // ============================================================================
            // create question set and state to go through the questions
            // ============================================================================
            var questions = new Array();
            var state = 0;
            var init_time = $.now();

            // change im_urls to your images
            var im_urls = [STATIC_ROOT + "/images/demo/dog.jpg",
                           STATIC_ROOT + "/images/demo/cat.jpg"];

            // ============================================================================
            // initialize images
            // ============================================================================
            for (i=0; i < im_urls.length; i++){
                var im = new Image();
                var q = new Object();
                im.src = im_urls[i];
                q.im = im;
                q.ans = '';
                // TODO: add fields for identifying images here
                questions.push(q);
            }

            // ============================================================================
            // page onload
            // ============================================================================
            $(window).load(function(){
                render_question(questions[0]);
                $("#dialog-modal" ).dialog({
                  autoOpen: false,
                  height: 250,
                  modal: true,
                buttons: {
                    'ok':function(){
                        $( this ).dialog( "close" );
                    },
                }
                });
                addDialog();
                $("#dialog-modal" ).hide();
                $('#next').bind('click', function(){next();});
                $('#prev').bind('click', function(){prev();});
            })

            // ================================================================
            // function to control next and previous question
            // ===============================================================
            function next(){
                var q = questions[state];
                // store user input
                q.ans = $('#description').val();
                if (q.ans.split(' ').length < 8){
                    render_dialog(7);
                    return -1;
                }
                if (state < questions.length-1){
                    state += 1;
                }else{
                    $("#dialog-confirm" ).dialog('open');
                }
                render_question(questions[state]);
            }
            function prev(){
                if (state > 0){
                    state -= 1;
                }
                render_question(questions[state]);
            }
            // ===============================================================
            // rednering question, image, and dialog
            // ==============================================================
            function render_question(q){
                render_im(q.im);
                $('.state-button').show();
                $('#description').show();
                $('#description').css('width', 480);
                $('#description').css('height', 100);
                $('#description').val(q.ans);
                $('#header').text('Please describe the image:');
            }
            function render_im(im){
                im.height = im.height * 480 / im.width
                im.width = 480;
                var c = $('#canvas')[0]
                if (im.width > im.height){
                    c.width =  480;
                    c.height = im.height * 480 / im.width;
                }else{
                    c.height = 360;
                    c.width = im.width * 360 / im.height
                }
                var ctx=c.getContext("2d");
                ctx.drawImage(im, 0, 0, c.width, c.height);
            }
            function render_dialog(idx){
                if (idx==1){
                    var text = 'Do not describe unimportant details.';
                }else if(idx == 2){
                    var text = 'Do not describe things that might have happened in the future or past.';
                }else if(idx == 3){
                    var text = 'Do not describe what a person might say.';
                }else if(idx == 4){
                    var text = 'Do not give people proper names.';
                }else if(idx == 5){
                    var text = 'This is the BEST sentence! Please apply the same rule to describe following 3 images.';
                }else if(idx == 6){
                    var text = 'Please includes more details.';
                }else if(idx==7){
                    var text = 'Please enter more than 8 words.';
                }else if(idx==8){
                    var text = 'Error occured when submitting the form, please try again.';
                }
                $("#dialog-modal" ).text(text);
                $("#dialog-modal" ).dialog('open');
            }
            function getAnswers(){
                var answers = [];
                for (var i=0; i<questions.length; i++){
                    answers.push({
                        description: questions[i].ans,
                        im_url: im_urls[i]
                    });
                }
                return answers;
            }

            // ===========================================================
            // add dialog for the web page
            // ===========================================================
            function addDialog(){
                $( "#dialog-confirm" ).dialog({
                  autoOpen: false,
                  resizable: false,
                  height:140,
                  modal: true,
                  buttons: {
                    "Yes": function() {
                      $( this ).dialog( "close" );
                      $("#ans").val(JSON.stringify(getAnswers()));
                      $('#mturk_form').submit();
                    },
                    Cancel: function() {
                      $( this ).dialog( "close" );
                    }
                  }
                });
                $( ".ui-dialog" ).css('position', 'absolute');
            }

            // ===========================================================
            // disable cut and paste on input text
            // ===========================================================
            $(document).ready(function(){
              $(document).on("cut copy paste","#description",function(e) {
                  e.preventDefault();
              });
             });
        </script>
    </head>
    <body>
        <div id="dialog-modal" title="Message"></div>
        <div id="dialog-confirm" title="Save the Result?"></div>
        <form name='mturk_form' method='post' id='mturk_form' action='MTURK_FORM_ACTION'>
            <input type='hidden' value='' name='assignmentId' id='assignmentId'/>
            <input type='hidden' value='' name='ans' id='ans'/>
            <input type='submit' id='submitButton' value='Submit' />
        </form>
        <script language='Javascript'>turkSetAssignmentID();</script>
        <div style='text-align:center;display:inline-block'>
            <div style='width:800px;display:inline-block'>
                <div style='display:inline-block;width:500px'>
                    <div style='padding-top:5px'>
                        <canvas id='canvas'></canvas>
                    </div>
                    <div style='padding-top:5px'>
                        <div id='userinput_div'>
                        <div id='header' style='font-weight:800; font-size: 14pt; padding-bottom:5px'>
                            Please decribe the image:
                        </div>
                        <!--<p style=''>Enter image description:</p> -->
                        <div id='userinput'>
                            <textarea id='description' maxlength=250 placeholder="Enter description here">
                            </textarea>
                        </div>
                        <div class='state-button' style='text-align:;display:inline-block'>
                            <input type='button' id='prev' value='prev'>
                        </div>
                        <div class='state-button' style='text-align:right;display:inline-block'>
                            <input type='button' id='next' value='next'>
                        </div>
                        </div>
                    </div>
                </div>
                <div style='display:inline-block;vertical-align:top;font-size:12pt;text-align:left;width:280px; padding-left:10px'>
                    <h style='font-weight:800'>Instructions:</h>
                    <li>Describe all the <span style='color:blue'>important parts</span> of the scene.</li>
                    <li><span style='color:red'>Do not</span> start the sentences with "There is".</li>
                    <li><span style='color:red'>Do not</span> describe unimportant details.</li>
                    <li><span style='color:red'>Do not</span> describe things that might have happened in the future or past.</li>
                    <li><span style='color:red'>Do not</span> describe what a person might say.</li>
                    <li><span style='color:red'>Do not</span> give people proper names.</li>
                    <li>The sentence should contain at least <span style='color:blue'>8 words</span>.</li>
                </div>
            </div>
        </div>
    </body>
</html>
